import "./index.scss";

import React, {
  ReactNode,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from "react";

import { Icon } from "../Icon";
import { LFHTMLDivElement } from "../../types/common";
import className from "classnames";

export interface TimeLineListType extends TimeItem {
  leftWidth?: number;
  rightWidth?: number;
  iconWidth?: number;
  widthCallback?: (info: { left: number; right: number; icon: number }) => void;
}
export interface TimeItem {
  leftContent?: ReactNode;
  rightContent?: ReactNode;
  iconType?: "success" | "error" | "warning" | "loading" | "default";
  icon?: React.ReactNode;
}

export const LfTimeLineItem = (props: TimeLineListType) => {
  const {
    leftContent,
    icon,
    rightContent,
    widthCallback,
    leftWidth,
    rightWidth,
    iconWidth,
    iconType = "default",
  } = props;
  const iconRef = useRef<LFHTMLDivElement>(null);
  const timeLineRef = useRef<HTMLLIElement>(null);
  const init = () => {
    if (!(iconRef?.current && timeLineRef?.current)) return;
    widthCallback?.({
      left: (timeLineRef.current.children[0] as HTMLLIElement).offsetWidth,
      right: (timeLineRef.current.children[2] as HTMLLIElement).offsetWidth,
      icon: iconRef?.current?.offsetWidth,
    });
  };
  const renderIcon = () => {
    switch (iconType) {
      case "default": {
        return null;
      }
      case "loading": {
        return <div className="timeline-loading"></div>;
      }
      default: {
        return <Icon name={`timeline-${iconType}`} />;
      }
    }
  };
  useLayoutEffect(() => {
    init();
  }, []);
  return (
    <li className="lf-timeline-item" ref={timeLineRef}>
      <div
        className="lf-timeline-item-left"
        style={{ width: leftWidth ? leftWidth : "auto" }}
      >
        {leftContent}
      </div>
      {icon ? (
        <div
          className="lf-timeline-item-icon"
          style={{ width: iconWidth ? iconWidth : "auto" }}
          ref={iconRef}
        >
          {icon}
        </div>
      ) : (
        <div
          className="lf-timeline-item-icon"
          style={{ width: iconWidth ? iconWidth : "auto" }}
          ref={iconRef}
        >
          <div className={`lf-timeline-item-icon-${iconType}`}>
            {renderIcon()}
          </div>
        </div>
      )}

      <div
        className="lf-timeline-item-right"
        style={{ width: rightWidth ? rightWidth : "auto" }}
      >
        {rightContent}
      </div>
    </li>
  );
};
export interface LfTimeLineProps {
  timeList: TimeItem[];
}
export const LfTimeLine = (props: LfTimeLineProps) => {
  const { timeList } = props;
  const [timeline, setTimeline] = useState<TimeLineListType[]>([]);
  const [timeLineInfo, setTimeLineInfo] = useState<{
    left: number;
    right: number;
    icon: number;
  }>({ left: 0, right: 0, icon: 0 });
  let count = 0;
  let newInfo = {
    left: timeLineInfo.left,
    right: timeLineInfo.right,
    icon: timeLineInfo.icon,
  };
  const widthCallback = (info: {
    left: number;
    right: number;
    icon: number;
  }) => {
    newInfo = {
      left: newInfo.left >= info.left ? newInfo.left : info.left,
      right: newInfo.right >= info.right ? newInfo.right : info.right,
      icon: newInfo.icon >= info.icon ? newInfo.icon : info.icon,
    };
    count++;
    if (count === timeline.length) {
      setTimeLineInfo(newInfo);
    }
  };
  const renderDom = () => {
    return timeline.map((item: TimeLineListType) => {
      return (
        <LfTimeLineItem
          {...item}
          leftWidth={timeLineInfo.left}
          rightWidth={timeLineInfo.right}
          iconWidth={timeLineInfo.icon}
          widthCallback={widthCallback}
        ></LfTimeLineItem>
      );
    });
  };

  useEffect(() => {
    setTimeline(timeList);
  }, [timeList]);
  return <ul className="lf-timeline">{renderDom()}</ul>;
};
